<template>
	<view>
		<view class="app-header-wrapper">
			<view class="app-header-left" @click="back">
				<view class="app-header-item">
					<view class="image-icons app-header-icon icon-back">
						<image src="../../static/images/left_b.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="app-header-middle">
				<view class="app-header-title text-ellipsis">
					个人中心
				</view>
			</view>
			<view class="app-header-right">
				<view class="icon" @click="toSearch">
					<image src="../../static/images/search_b.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="con-view">
			<view class="ol">
				<view class="li" v-for="(i,j) in list" :key="j">
					{{i}}
				</view>
			</view>
		</view>
		<view class="footer maxW" @click="userLoginOut">
			退出账号
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['地址管理', '经营证照', '协议规则', '隐私管理', '小米商城用户协议', '小米商城隐私协议', '小米账号使用协议', '小米账号隐私政策']
			};
		},
		methods: {
			back() {
				uni.navigateBack(-1)
			},
			toSearch() {
				uni.navigateTo({
					url: '/secPage/searchView/searchView'
				})
			},
			userLoginOut() {
				let self = this
				let userToken = uni.getStorageSync('USER_TOKEN')
				uni.request({
					url: 'http://42.193.218.104:7744/api/userLoginOut',
					method: 'POST',
					header: {
						Authorization: userToken
					},
					success: function(res) {
						if (res.data.code == 200) {
							uni.removeStorageSync('USER_TOKEN');
							uni.setStorageSync('isLogin', 'no')
							let p = getCurrentPages()
							if (p.length == 1) {
								uni.reLaunch({
									url: '/pages/user/user',
								})
							} else {
								uni.navigateBack({
									delta: 1,
								})
							}
						}
					}
				})
			},
		},
		onShow() {
			let isLogin = uni.getStorageSync('isLogin')
			if (!isLogin || isLogin == 'no') {
				uni.redirectTo({
					url: '/pages/login-view/login-view'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-header-wrapper {
		background-color: rgb(242, 242, 242);
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 50%;
		width: 7.2rem;
		transform: translateX(-50%);
		border-bottom: 1px solid #f5f5f5;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: .96rem;
		color: #666;
		padding: 0;
		transition: transform .2s ease-out;

		&>view {
			display: flex;
			align-items: center;
		}

		.app-header-item {
			display: block;
			width: 0.6rem;
			margin: 0 0.2rem;
		}

		.app-header-left {

			.app-header-item {

				.icon-back {
					width: 0.5rem;
					height: 0.5rem;
					line-height: .6rem;

					image {
						width: 0.5rem;
						height: 0.5rem;
					}
				}
			}
		}

		.app-header-middle {
			flex: 1;
			text-align: center;
			min-width: 0;

			.app-header-title {
				color: rgb(102, 102, 102);
				width: 100%;
				font-size: .3rem;
			}
		}

		.app-header-right {
			min-width: 1rem;

			.icon {
				display: block;
				width: 0.6rem;
				margin: 0 0.2rem;
			}

			image {
				width: 0.6rem;
				height: 0.6rem;
			}
		}
	}

	.con-view {

		.ol {
			margin-bottom: 0.3rem;

			.li {
				width: 100%;
				display: inline-block;
				padding: 0.2rem;
				border-bottom: 1px solid #f6f6f6;
				box-sizing: border-box;
				position: relative;
				text-align: left;
				color: #3c3c3c;
				font-size: .3rem;
			}
		}
	}

	.footer {
		background-color: #f4f4f4;
		text-align: center;
		height: 1rem;
		line-height: 1rem;
		box-shadow: 0 3px 14px 2px rgba(0, 0, 0, .12);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		font-size: .3rem;
		color: #3c3c3c;
	}
</style>